<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>wheels</title>

    <style>
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-size: var(--font-size);
        }

        #app {
            margin: 20px;
        }

        .test {
            height: 30px;
            border: 1px solid lightblue;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .header, .footer, .content, .sider {
            color: #fff;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .header, .footer {
            background: #7dbcea;
        }

        .content {
            background: #108ee9;
        }

        .sider {
            background: #3ba0e9;
        }

        .test1 {
            position: fixed;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: red;
        }

        .test2 {
            position: fixed;
            top: 0;
            left: 50%;
            width: 1px;
            height: 100%;
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="./src/base.css"/>
</head>
<body>
<div id="app">
    <div style="margin-top: 20px;">Collapse组件</div>
    <x-collapse :value.sync="select">
        <x-collapse-item title="标题1" tag="1">
            <p>上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看</p>
            132123123
            123123123
            <br>
            123123
        </x-collapse-item>

        <x-collapse-item title="标题2" tag="1">
            <p>上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看</p>
        </x-collapse-item>
        <x-collapse-item title="标题3" tag="3">
            <p>你吧都快睡觉你不不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看</p>
        </x-collapse-item>
    </x-collapse>

    {{select}}

    <x-collapse>
        <x-collapse-item title="标题1">
            <p>上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看</p>
            132123123
            123123123
            <br>
            123123
        </x-collapse-item>

        <x-collapse-item title="标题2">
            <p>上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看</p>
        </x-collapse-item>
        <x-collapse-item title="标题3">
            <p>你吧都快睡觉你不不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看</p>
        </x-collapse-item>
    </x-collapse>
    <x-collapse mode="multiple" :value.sync="selects">
        <x-collapse-item title="标题1" tag="1">
            <p>上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看</p>
            132123123
            123123123
            <br>
            123123
        </x-collapse-item>

        <x-collapse-item title="标题2" tag="1">
            <p>上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看</p>
        </x-collapse-item>
        <x-collapse-item title="标题3" tag="3">
            <p>你吧都快睡觉你不不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看上单送单送看送的你尽管放那就给你吧都快睡觉你不是看到你就不该看</p>
        </x-collapse-item>
    </x-collapse>

    <div style="margin-top: 20px;">Popover组件</div>
    <p>根据距离窗口边缘的距离自动调整位置</p>


    <x-popover mode="hover">
        <template v-slot:content>
            <div>我是popover2</div>
        </template>

        <x-button>竖直方向popover</x-button>
    </x-popover>

    <x-popover layout="horizontal" mode="hover">
        <template v-slot:content>
            <div>我是popover2</div>
        </template>

        <x-button>水平popover</x-button>
    </x-popover>
    <x-popover>
        <template v-slot:content>
            <div>我是popover2</div>
        </template>

        <x-button>竖直方向popover</x-button>
    </x-popover>
    <x-popover layout="horizontal">
        <template v-slot:content>
            <div>我是popover2</div>
        </template>

        <x-button>水平popover</x-button>
    </x-popover>

    <div style="margin-top: 20px;">Tabs组件</div>

    <x-tabs>
        <x-tabs-item label="标签1">
            <div>123</div>
        </x-tabs-item>
        <x-tabs-item label="标签2">two</x-tabs-item>
        <x-tabs-item label="标签3">three</x-tabs-item>
    </x-tabs>


    <div style="margin-top: 20px;">Toast组件</div>
    <x-button @click.native="showToast('top')">toast-top</x-button>
    <x-button @click.native="showToast1('center')">toast-center</x-button>
    <x-button @click.native="showToast('bottom')">toast-bottom</x-button>
    <div style="margin-top: 20px;">
        布局
        <div style="margin-top: 20px;">上-中-下</div>
        <div style="height: 150px;">
            <x-layout>
                <x-header>
                    <div class="header">header</div>
                </x-header>
                <x-content>
                    <div class="content">content</div>
                </x-content>
                <x-footer>
                    <div class="footer">footer</div>
                </x-footer>
            </x-layout>
        </div>
        <div style="margin-top: 20px;">上-中[左-右]-下</div>
        <div style="height: 150px;">
            <x-layout>
                <x-header>
                    <div class="header">header</div>
                </x-header>
                <x-layout>
                    <x-sider>
                        <div class="sider">sider</div>
                    </x-sider>
                    <x-content>
                        <div class="content">content</div>
                    </x-content>
                </x-layout>
                <x-footer>
                    <div class="footer">footer</div>
                </x-footer>
            </x-layout>
        </div>

        <div style="margin-top: 20px;">上-中[左-右]-下</div>
        <div style="height: 150px;">
            <x-layout>
                <x-header>
                    <div class="header">header</div>
                </x-header>
                <x-layout>
                    <x-content>
                        <div class="content">content</div>
                    </x-content>
                    <x-sider>
                        <div class="sider">sider</div>
                    </x-sider>
                </x-layout>
                <x-footer>
                    <div class="footer">footer</div>
                </x-footer>
            </x-layout>
        </div>

        <div style="margin-top: 20px;">左-右[上-中-下]</div>
        <div style="height: 150px;">
            <x-layout>
                <x-sider>
                    <div class="sider">sider</div>
                </x-sider>
                <x-layout>
                    <x-header>
                        <div class="header">header</div>
                    </x-header>
                    <x-content>
                        <div class="content">content</div>
                    </x-content>
                    <x-footer>
                        <div class="footer">footer</div>
                    </x-footer>
                </x-layout>
            </x-layout>

        </div>

    </div>
    <div style="margin-top: 20px;">
        栅格
    </div>
    <p>no span</p>
    <x-row>
        <x-col>
            <div class="test">12</div>
        </x-col>
        <x-col>
            <div class="test">12</div>
        </x-col>
    </x-row>

    <p>span</p>
    <x-row>
        <x-col span="4">
            <div class="test">span="4"</div>
        </x-col>
        <x-col span="20">
            <div class="test">span="20"</div>
        </x-col>
    </x-row>

    <p>offset</p>
    <x-row>
        <x-col span="4">
            <div class="test">span="4"</div>
        </x-col>
        <x-col span="18" offset="2">
            <div class="test">span="18" offset="2"</div>
        </x-col>
    </x-row>

    <p>gutter</p>
    <x-row gutter="20">
        <x-col span="2">
            <div class="test">span="2"</div>
        </x-col>
        <x-col span="5">
            <div class="test">span="5"</div>
        </x-col>
        <x-col span="6">
            <div class="test">span="6"</div>
        </x-col>
        <x-col span="7">
            <div class="test">span="7"</div>
        </x-col>
        <x-col span="4">
            <div class="test">span="4"</div>
        </x-col>
    </x-row>

    <p>响应式</p>
    <x-row>
        <x-col :span="24" :ipad="{span: '12'}" :small-pc="{span: '8'}" :normal-pc="{span: '6'}" :large-pc="{span: '8'}">
            <div class="test">span="24" ipad="{span: '12'}" small-pc="{span: '8'}" normal-pc="{span: '6'}" large-pc="{span: '8'}"</div>
        </x-col>

    </x-row>
    <div style="margin-top: 20px;"></div>
    <x-row>
        <x-col :span="24" :ipad="{span: '12'}" :small-pc="{span: '8'}" :normal-pc="{span: '6'}" :large-pc="{span: '8'}">
            <div class="test"></div>
        </x-col>
        <x-col :span="24" :ipad="{span: '12'}" :small-pc="{span: '8'}" :normal-pc="{span: '6'}" :large-pc="{span: '8'}">
            <div class="test"></div>
        </x-col>
        <x-col :span="24" :ipad="{span: '12'}" :small-pc="{span: '8'}" :normal-pc="{span: '6'}" :large-pc="{span: '8'}">
            <div class="test"></div>
        </x-col>
        <x-col :span="24" :ipad="{span: '12'}" :small-pc="{span: '8'}" :normal-pc="{span: '6'}" :large-pc="{span: '8'}">
            <div class="test"></div>
        </x-col>
        <x-col :span="24" :ipad="{span: '12'}" :small-pc="{span: '8'}" :normal-pc="{span: '6'}" :large-pc="{span: '8'}">
            <div class="test"></div>
        </x-col>
        <x-col :span="24" :ipad="{span: '12'}" :small-pc="{span: '8'}" :normal-pc="{span: '6'}" :large-pc="{span: '8'}">
            <div class="test"></div>
        </x-col>

    </x-row>


    <div style="margin-top: 20px;">
        输入框
    </div>

    <x-input value="normal" @change="xchange" @input="xinput" @focus="xfocus" @blur="xblur"></x-input>
    <x-input value="disabled" disabled></x-input>
    <x-input value="readonly" readonly></x-input>
    <x-input value="error" :error="true" message="错误信息"></x-input>
    <x-input placeholder="123" v-model="message"></x-input>
    {{message}}

    <div style="margin-top: 20px;">
        按钮
    </div>

    <x-button disabled icon="setting" icon-align="right" :loading="loading1" @click="loading1 = !loading1">按钮</x-button>
    <x-button icon="good" :loading="loading2" @click="loading2 = !loading2">按钮</x-button>
    <x-button icon="left" :loading="loading3" @click="loading3 = !loading3">按钮</x-button>
    <x-button-group>
        <x-button icon="left">上一页</x-button>
        <x-button>更多</x-button>
        <x-button icon="right" icon-align="right">上一页</x-button>
    </x-button-group>
    <x-icon name="loading"></x-icon>
    <div class="test1"></div>
    <div class="test2"></div>
</div>

<!-- 单元测试用 -->
<!--<div id="test"></div>-->


<script src="./src/app.js"></script>
<script src="./src/icon.js"></script>
</body>
</html>
